<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>安利我的CP~</title>
    <link rel="stylesheet" href="css/01.css">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
</head>
<body>
    <div class="content">
        <div id="list">
            <img src="images/饼饼01.jpg" alt="">
            <img src="images/糕糕01.jpg" alt="">
            <img src="images/双A.jpg" alt="">
            <img src="images/糕糕02.jpg" alt="">
            <img src="images/饼饼02.jpg" alt="">
            <img src="images/双奶.jpg" alt="">
        </div>
        <button id="prev"></button>
        <button id="next"></button>
        <div id="btns">
            <span class="current"></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </div>
    </div>
    <script>
        $(function(){
            var index=0;
            $("#next").click(function(){
                index++;
                if (index>5)
                {
                    index=0;
                }
                console.log(index);
                $("#list img").eq(index).fadeIn(500).siblings().fadeOut(500);
                $("#btns span").eq(index).addClass("current").siblings().removeClass("current");
            })
            $("#prev").click(function(){
                index--;
                console.log(index);
                if(index<0){
                    index=5;
                }
                $("#list img").eq(index).fadeIn(500).siblings().fadeOut(500);
                $("#btns span").eq(index).addClass("current").siblings().removeClass("current");
            })
            $("#btns span").click(function(){
                let i = $(this).index();
                console.log(i);
                index = i;
                $("#list img").eq(index).fadeIn(500).siblings().fadeOut(500);
                $("#btns span").eq(index).addClass("current").siblings().removeClass("current");
            })
            function play() {
                timer = setInterval(function () {
                    $("#next").click()
                }, 3000)
            }
            function stop() {
                clearInterval(timer)
            }
            $(".content").mouseover(function(){
                stop();
            })
            $(".content").mouseout(function(){
                play();
            })
            play();
        })
    </script>
</body>
</html>